.header {
    text-align: center;
    margin-bottom: 60px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 60%;
    margin: auto;
    width: 380px;
}
form {
    margin-bottom: 80px;
}
@media screen and (max-width:800px){
	.header{padding:0px}
	
.header {
    width: 95%;
}	
}:root{--space-root:1rem;--space-xs:calc(var(--space-root) / 2);--space-s:calc(var(--space-root) / 1.5);--space-m:var(--space-root);--space-l:calc(var(--space-root) * 1.5);--space-xl:calc(var(--space-root) * 2);--color-primary:mediumslateblue;--color-secondary:black;--color-tertiary:hotpink;--base-border-radius:0.25rem;--ease:cubic-bezier(0.075,0.82,0.165,1);--duration:350ms;--font-family:'Roboto',sans-serif;--font-size:1.25rem}
*{box-sizing:border-box}
body {
    position: relative;
    display: grid;
    place-items: center;
    margin: 0;
    height: 100vh;
    padding: var(--space-m);
    line-height: 1;
    background: url(../img/loginbj.jpg) top/cover no-repeat;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
a {
    color: #444444;
}
a:focus{color:var(--color-secondary)}
h2 {
    font-weight: 600;
    font-size: calc(var(--font-size) * 1.5);
    color: #444444;
}
.form:hover,.form:focus-within{-webkit-transform:scale(1.0001);transform:scale(1.0001);box-shadow:0 1rem 3rem rgba(0,0,0,0.1)}
.form:hover:before,.form:hover:after,.form:focus-within:before,.form:focus-within:after{background-color:white;-webkit-transform:skewY(0);transform:skewY(0)}
.form-inner{padding:var(--space-xl);background-color:white;z-index:1}
.form-inner > * + *{margin-top:var(--space-xl)}
.input-wrapper:focus-within label{color:var(--color-secondary)}
.input-wrapper:focus-within .icon{background-color:#ababab;}
.input-wrapper:focus-within input{border: 2px solid #ababab;}
.input-wrapper + .input-wrapper{margin-top:var(--space-l)}
.input-group{position:relative}
.input-group input{border-radius:var(--base-border-radius);padding-left:calc(var(--space-s) + 60px)}
.input-group .icon{position:absolute;top:0;left:0;height:100%;border-top-left-radius:var(--base-border-radius);border-bottom-left-radius:var(--base-border-radius);pointer-events:none}
label {
    font-size: calc(var(--font-size) / 1.65);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.065rem;
    display: block;
    margin-bottom: var(--space-xs);
    color: #444444;
}
.icon {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    flex: 0 1 auto;
    padding: var(--space-m);
    background-color: #e0e0e0;
}
.icon svg{width:1.25em;height:1.25em;fill:white;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:-webkit-transform var(--duration) var(--ease);transition:-webkit-transform var(--duration) var(--ease);transition:transform var(--duration) var(--ease);transition:transform var(--duration) var(--ease),-webkit-transform var(--duration) var(--ease)}
input {
    -webkit-box-flex: 1;
    flex: 1 1 0;
    width: 100%;
    outline: none;
    padding: var(--space-m);
    font-size: var(--font-size);
    font-family: var(--font-family);
    color: var(--color-secondary);
    border: 2px solid #e0e0e0;
    height: 50px;
}

 
.btn-group{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:justify;justify-content:space-between}
.btn-group > * + *{margin-left:var(--space-s)}
.btn{position:relative;overflow:hidden;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:justify;justify-content:space-between;outline:none;padding:var(--space-m) var(--space-l);cursor:pointer;border:2px solid transparent;border-radius:var(--base-border-radius)}
.btn--primary{font-size:calc(var(--font-size) / 1.65);font-weight:700;text-transform:uppercase;letter-spacing:0.065rem;background-color:var(--color-primary);border-color:var(--color-primary);color:white}
.btn--primary {
    font-size: calc(var(--font-size) / 1.65);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.065rem;
    background-color: #444444;
    border-color: #e0e0e0;
    color: white;
    height: 50px;
    line-height: 0px;
}
.btn--text{font-size:calc(var(--font-size) / 1.5);padding:0}
.yzm {
    font-size: calc(var(--font-size) / 1.5);
    padding: 0;
    position: absolute;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    flex: 0 1 auto;
    padding: var(--space-m);
    background-color: #444;
    right: 5px;
    top: 5px;
    border-radius: 5px;
    line-height: 0px;
    color: #ffffff;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--base-border-radius);
    height: 40px;
}
.footer {
    min-height: 60px;
    line-height: 60px;
    width: 100%;
    position: fixed;
    left: 0px;
    bottom: 0px;
    text-align: center;
    background: rgba(0,0,0,0.3);
    color: #c2c2c2;
}
.yzms {
    font-size: calc(var(--font-size) / 1.5);
    position: absolute;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    flex: 0 1 auto;
    padding: var(--space-m);
    right: -12px;
    top: -13px;
    line-height: 16px;
    color: #ffffff;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--base-border-radius);
}